<template>
  <div class="file-upload-content">
    <el-upload drag :action="action" :file-list="fileList" ref="uploadRef" :on-success="uploadSuccess" :on-remove="fileRemove" :before-upload="validator" :limit=1>
      <div class="upload-content">
        <i class="el-icon-upload" />
        <div>将文件拖到此处，或<span>点击上传</span></div>
        <p><span>支持扩展名：</span><i v-for="i in acceptFormat" :key="i">{{ i }}</i></p>
      </div>
    </el-upload>
    <div class="import-type">
      <span>添加方式：</span>
      <el-radio-group v-model="importType">
        <el-radio :label="1">新增</el-radio>
        <el-radio :label="2">覆盖</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, Ref } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

export default {
  props: {
    moduleId: String
  },
  setup(props) {
    let fileList: Ref<any[]> = ref([]);
    let action = `${import.meta.env.VITE_APP_BASE_URL}/system/file/uploadFile`
    // let action = `http://192.168.1.195/system/file/uploadFile`
    let acceptFormat =  ['doc', 'docx']
    let importType = ref(1);
    let store = useStore();
    let subjectId = store.getters.subject.code;
    const validator = (file) => {
      let idx = file.name.lastIndexOf('.');
      let ext = file.name.substr(idx + 1).toLocaleLowerCase();
      let valid = acceptFormat.includes(ext);
      !valid && ElMessage.warning(`请上传以下指定格式文件，${acceptFormat.join('、')}`)
      return valid;
    }
    
    const uploadSuccess = (res) => {
      fileList.value.push({ ...res.json, name: res.json.oriFilename, url: res.json.filePath, status: 'success' })
    };
    const fileRemove = (file) => {
      fileList.value.splice(fileList.value.findIndex(f => file.filePath === f.filePath), 1);
    };
    const save = (resolve, reject) => {
      if (!fileList.value.every(file => file.status === 'success')) {
        console.log(fileList)
        ElMessage.warning('文件正在上传中.... 请稍等片刻~！');
        reject();
      } else if (fileList.value.length) { 
        axios.post('/admin/knowledgeContent/importFromWord', { 
          importType: importType.value,
          subjectId: subjectId,
          filePath: fileList.value[0].filePath,
          fileName: fileList.value[0].oriFilename,
          moduleId: props.moduleId
        }).then((res: any) => {
          res.result ? resolve(res) : reject()
        })
      } else {
        ElMessage.warning('请上传文件！');
        reject();
      }
    }
    return { action, fileList, uploadSuccess, fileRemove, acceptFormat, validator, importType, save }
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  width: 100%;
  .el-upload-dragger {
    width: 100%;
    height: 180px;
    background: none;
  }
}
.upload-content {
  & > i {
    margin-top: 24px;
    color: #72b22a;
  }
  div {
    color: #1a2633;
    margin-bottom: 8px;
    span {
      color: #72b22a;
    }
  }
  p {
    color: #999;
    font-size: 12px;
    padding: 0 50px;
    i::after {
      content: '、';
      display: inline-block;
    }
  }
}
h3 {
  margin: 20px 0 10px;
}
:deep(.tag-box) {
  .el-tag {
    margin: 0 10px 10px 0;
  }
}
.public {
  margin: 20px 0;
  span {
    margin-right: 10px;
  }
}
</style>